<template>
  <div id="app" >
      <!-- 头部logo及导航 -->
      <div class='header_bg' :style='{position:Global.currentDevice? "fixed":"absolute"}'>
        <!-- pc-menu  s-->
        <ul class=' header nav' v-if='!Global.currentDevice'> 
            <!-- logo占位   -->
            <li>
              <router-link  to='/index' >
                <img  src='static/img/logo.png'  alt='奥利维亚' height="54"  class="vertical-middle">
              </router-link>
            </li>
            <!-- 菜单 -->
            <li  v-for='(item,index) in navItem'  :key='index'  class='relative'  :class='{active:item.to==currentRoute}' > 
              <!-- 无子菜单 -->
              <router-link  v-if = '!item.children'  :to=item.to >{{item.title}}</router-link>  
              <!-- 子菜单 -->
              <span         v-else   class='inline-block cursor w-100 '  @mouseenter='mouseenter(index)'  @mouseleave='mouseleave(index)'>
                {{item.title}}
                <!-- 二级菜单 -->
                <!-- 鼠标移入时 菜单位置数等于子菜单位置数 ，可展示；移除时隐藏 --> 
                  <dl  class='absolute  childrenNav dl_leave'   :class='{dl_active:currentNavNum==index,expand:$store.state.language=="en"&&index==2}' > 
                      <dd v-for=' (item,ind) in item.children'  :key='ind'  :class='{active:item.to==$route.path,mt10:ind==0}'>
                        <!-- 内部页面跳转 -->
                        <router-link v-if='item.to' :to='item.to' > {{item.title}}</router-link>
                        <!-- 外部网站链接 -->
                        <a  v-else  :href="item.link" target="_blank">{{item.title}}</a>
                      </dd> 
                  </dl>
              </span> 
            </li>
            <!-- 菜单-用户登录状态项 -->
            <li>
              <!-- 游客访问 -->
              <span        v-if='!token'  class='link'  @click='loginshow()'>{{headerData.userName.unlogin}}</span> 
              <!-- 用户访问 -->
              <a-dropdown  v-else>
                  <div  class='currentuser_bg cursor' >&nbsp;&nbsp;&nbsp; {{headerData.userName.login}}</div> 
                  <a-menu slot="overlay">
                      <a-menu-item>
                          <span @click='loginOut()'><a-icon type="poweroff" /> {{headerData.userName.logout}}</span>
                      </a-menu-item> 
                  </a-menu>
              </a-dropdown>
            </li>    
        </ul>
        <!-- pc-menu  e-->

        <!-- mobile-menu s-->
        <a-row v-else  class='pl30 pr30' >
              <!-- logo占位   --> 
              <router-link  to='/index'  class='inline-block'><img  src='static/img/logo.png'  alt='奥利维亚' height="54"  class="vertical-middle"></router-link> 
              <!-- 导航按钮 -->
              <a-icon type="menu-fold"  class='fr mobile_menu' @click='mobile_touch_visible=true'/> 
              <!-- 导航栏抽屉 -->
              <a-drawer  :width='180' :bodyStyle='{padding:0}' 
                placement="right"
                :closable="false"
                @close="mobile_touch_visible=false"
                :visible="mobile_touch_visible"
              >
                <template slot='title'>
                    <span class='cursor link' @click='loginshow()' v-if='!token'>登录</span>
                    <div class='ft16' v-else>
                      <span>欢迎您：{{username}}<a-icon type="poweroff" @click='loginOut()' class='fr mt6'/></span> 
                    </div>
                </template>
                  <a-menu   mode="inline"   >
                      <template v-for='(item,index) in  navItem'>
                          <!-- 光杆司令 -->
                          <a-menu-item  :key="index"  v-if='!item.children'>
                              <router-link  :to='item.to'><span>{{item.title}}</span></router-link>
                          </a-menu-item>
                          <!-- 小队大将 -->
                          <a-sub-menu   :key="index"  v-else>
                              <span slot="title"><span>{{item.title}}</span></span>
                              <template v-for='(nav,ind) in  item.children'>
                                  <!-- sub-menu下的key 规律 0sub0 -->
                                  <a-menu-item  :key='subindex(index,ind)'> 
                                      <router-link  v-if='nav.to' :to='nav.to' > {{nav.title}}</router-link>
                                      <a            v-else  :href="nav.link" target="_blank">{{nav.title}}</a>
                                  </a-menu-item>
                              </template>
                          </a-sub-menu> 
                      </template> 
                  </a-menu>
              </a-drawer>
        </a-row>
        <!-- mobile-menu e-->
      </div>
     
      
      <router-view   :language='LANGUAGES'/>
      
      <!-- pc-footer s-->
      <div  class='footer_bg'  v-if='!Global.currentDevice'><!-- {{LANGUAGES.commonComponent.footerNav.left}} -->
          <a-row  class='footer  clear'> 
              <a-col  class='footerNav' :xs="2" :sm="4" :md="6" :lg="12">
                <!-- 网站导航 -->
                <div style="margin-bottom: 8px;">
                    <b>{{footerData.navigation.title}}</b> <br>
                    <router-link to='/index'>{{footerData.navigation.index}}</router-link>
                    <router-link to='/aboutus'>{{footerData.navigation.aboutus}}</router-link>
                    <router-link to='/financing_case/1'>{{footerData.navigation.rongzi_way}}</router-link>       
                    <router-link to='/eCommerce/overseas'>{{footerData.navigation.oversea}}</router-link>        
                    <router-link to='/contact'>{{footerData.navigation.contact}}</router-link> 
                </div> 
                <!-- 公司地址 -->
                <p>
                    <b>{{footerData.contact.title}}</b> <br>
                    <span>{{footerData.contact.address}}</span><br/>
                    <span>{{footerData.contact.phone}}：0571-89996201</span> <br>
                    <span>{{footerData.contact.email}}：info@oliviascm.com</span> <br>
                    <a href="http://www.beian.miit.gov.cn" target="_blank" class='white ft12'>&copy;{{footerData.contact.ipRecord}}</a> 
                </p>
              </a-col> 
              <!-- 友情链接及微信二维码  -->
              <a-col  :xs="2" :sm="4" :md="6" :lg="12" > 
                  <!-- 友情链接 -->
                  <div style="margin-bottom: 8px;">
                    <b>{{footerData.link.title}}</b> <br> 
                    <a href="http://yuyoutravel.com/kuntingGroup.htm" target='_blank'>{{footerData.link.group}}</a> |
                    <a href="http://oliviascm.com/" target='_blank'>{{footerData.link.olivia}}</a> | 
                    <a href="http://yuyoutravel.com/" target='_blank'>{{footerData.link.yuyou}}</a> | 
                    <a href="http://www.infincare.com/" target='_blank'>{{footerData.link.infincare}}</a>  
                  </div>
                  <!-- 微信二维码   -->
                  <p>
                    <b>{{footerData.QRcode.title}}</b> <br>
                    <div class='QRimg'>
                        {{footerData.QRcode.yuyou}} <br>
                        <img src='/static/img/QR_yuyou.jpg' alt='余悠商城' />
                    </div>
                    <div class='QRimg'>
                        {{footerData.QRcode.goworld}} <br>
                        <img src='/static/img/QR_goworld.jpg' alt='走天下' /> 
                    </div>
                    <div class='QRimg'>
                        {{footerData.QRcode.infincare}} <br>
                        <img src='/static/img/QRcode.png' alt='走进德国'  /> 
                    </div>
                    <div class='QRimg'>
                        {{footerData.QRcode.wanfeng}} <br>
                        <img src='/static/img/QR_wanfeng.jpg' alt='晚峰书屋' /> 
                    </div> 
                  </p> 
              </a-col> 
          </a-row>
 
      </div>
      <!-- pc-footer e-->

      <!-- mobile-footer s-->
      <div v-else  class='mobile-footer'>
          <!-- 网站导航公司地址 -->
          <span><a-icon type="environment" />{{footerData.contact.address}}</span><br/>
          <span><a-icon type="phone" /> 0571-89996201</span> <br>
          <span><a-icon type="mail" /> info@oliviascm.com</span> <br>
          <a href="http://www.beian.miit.gov.cn" target="_blank" class='white ft12'>&copy;{{footerData.contact.ipRecord}}</a>

          <!-- 友情链接 --> 
          <div style="margin-bottom: 8px;">
            <b>{{footerData.link.title}}</b> <br> 
            <a href="http://yuyoutravel.com/kuntingGroup.htm" target='_blank'>{{footerData.link.group}}</a> |
            <a href="http://oliviascm.com/" target='_blank'>{{footerData.link.olivia}}</a> | 
            <a href="http://yuyoutravel.com/" target='_blank'>{{footerData.link.yuyou}}</a> | 
            <a href="http://www.infincare.com/" target='_blank'>{{footerData.link.infincare}}</a>  
          </div> 
          <!-- 微信二维码  -->
          <p>
            <b>{{footerData.QRcode.title}}</b> <br>
            <div class='QRimg'>
                {{footerData.QRcode.yuyou}} <br>
                <img src='/static/img/QR_yuyou.jpg' alt='余悠商城' />
            </div>
            <div class='QRimg'>
                {{footerData.QRcode.goworld}} <br>
                <img src='/static/img/QR_goworld.jpg' alt='走天下' /> 
            </div>
            <div class='QRimg'>
                {{footerData.QRcode.infincare}} <br>
                <img src='/static/img/QRcode.png' alt='走进德国'  /> 
            </div>
            <div class='QRimg'>
                {{footerData.QRcode.wanfeng}} <br>
                <img src='/static/img/QR_wanfeng.jpg' alt='晚峰书屋' /> 
            </div> 
          </p>  
      </div>
      <!-- mobile-footer e-->

      <!-- 回到顶部 -->
      <a-back-top />

      <!-- 登录modal -->
      <loginForm  refs='loginBox' :visible='loginFormShow' :language='LANGUAGES' v-on:handleCancel='cancelLogin'></loginForm>  
  </div>
</template>

<script>

import loginForm  from '@/components/loginForm'
import { mapGetters }  from 'vuex'
export default {
  name: 'App',
  props:{
    LANGUAGES:Object
  },
  data(){
    return {
      headerData:this.LANGUAGES.commonComponent.headerNav, 
      footerData:this.LANGUAGES.commonComponent.footerNav,
      
      mobile_touch_visible:false,//mobile-menu visible 
      currentNavNum:0,/*hover 导航对应的index*/  
       
    }
  },
  created(){
    // console.log(this.LANGUAGES) 
    let isMobile = this.isPC_Mobile()
    this.$store.commit('setisMobile',isMobile)
  },
  methods:{
    loginshow(){
         this.$store.commit("setloginFormShow",true)
    },
    cancelLogin(){
        this.$store.commit("setloginFormShow",false)
    },
    loginOut(){  
        window.sessionStorage.clear()
        this.$store.commit("settoken",'')  
        this.$store.commit("setusername",'')  
        this.$store.commit("setloginFormShow",false)  
    },
    mouseenter(index){
      this.currentNavNum = index  
    },
    mouseleave(index){  
      this.currentNavNum = null 
    },
    
  },
  mounted(){
    
  },
  components:{ 
    loginForm
  },
  updated(){
    // console.log(this.LANGUAGES.home.titleA+'app.vue',this.footer.left.index)
  },
  computed:{
    ...mapGetters(['breadcrumbItems','loginFormShow','token','username']),

    //当前二级菜单中的父菜单设置路径，并不一定是真实路由
    currentRoute(){
        let path = this.$route.path  
        if((path=='/index' || path=='/aboutus' || path=='/contact' || path=='/')){ 
          return path
        }
        else{ 
          return this.breadcrumbItems[1].path
        } 
        
    },
    subindex(index,ind) {
        return function(value,val) {
            return value+'sub'+val
        }
    },
    navItem(){
      return [
        { to:'/index',title:this.headerData.one.title},
        { to:'/aboutus',title:this.headerData.two.title},
        { to:'/financing_case',title:this.headerData.three.title,//二级菜单中一级导航 ≠ 路由
          children:[
            {to:'/financing_case/1',title:this.headerData.three.children.titleA},
            {to:'/financing_case/2',title:this.headerData.three.children.titleB},
            // {link:'http://mingbo-scm.inboom.cc/',title:this.headerData.three.children.titleC},
          ]},
        {
          to:'/eCommerce',title:this.headerData.four.title,
          children:[
            { to:'/eCommerce/overseas',title:this.headerData.four.children.titleA}, 
            { to:'/eCommerce/duty_paragraph',title:this.headerData.four.children.titleB}, 
            { to:'/eCommerce/delivery',title:this.headerData.four.children.titleC}, 
          ]
        }, 
        { to:'/contact',title:this.headerData.five.title}, 
      ]
    } 
    
  },
  watch:{
    /*监听prop数据变化，使原始data里数据变化.一定要增加监听*/
      LANGUAGES(newval,oldval){ 
        this.headerData = newval.commonComponent.headerNav
        this.footerData = newval.commonComponent.footerNav
      }
  }
}
</script>

<style>
@import "./assets/css/public.css";
#app {
  font-family: MicrosoftYaHei, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative; 
  padding-top:80px; 
  color: #333;  
  min-height: 100%;
}

/*头部logo及导航*/
.header_bg{position: absolute;top:0;width: 100%;height: 80px;line-height: 80px;z-index:99;background-color: #fff;}
.header{width:1200px;margin:0 auto;text-align: center;}
/*导航栏*/
.nav li{display: inline-block;width:14%;font-size: 18px;}  
.nav li.active{background: #2E4E7E;color: #fff;}
.nav li a{display: inline-block;}
/*导航栏——子导航*/
.childrenNav{right: 0;width: 100%;height: 0;overflow: hidden;line-height: 1;background-color: #CBD2DF;color: #333;}
.childrenNav.dl_leave{animation: moveOut 0.5s;animation-fill-mode: forwards;-webkit-animation:moveOut 0.5s;-webkit-animation-fill-mode: forwards;}
@keyframes moveOut{
  0%{ height: 100% }
  100%{ height: 0;}
}
.childrenNav.dl_active{animation: moveIn 0.5s;animation-fill-mode: forwards;-webkit-animation:moveIn 0.5s;-webkit-animation-fill-mode: forwards;}
@keyframes moveIn{
  0%{ height: 0 }
  100%{ height: 140px }
} 
.childrenNav.expand{width: 200%;left:0;margin-left: -50%;}/*英文过长时拉长显示*/
.childrenNav dd{font-size: 14px;height: 40px;line-height: 40px;} 
.childrenNav dd.active{background-color: #2E4E7E;color: #fff;}
 /*导航栏-登录用户*/
.currentuser_bg{background: url(assets/img/icon-user.png) no-repeat 16px /20px 20px;}

/*底部栏*/
.footer_bg{background-color: #21395d;color:#fff;padding: 20px 0;}
.footer{width: 1200px;margin:0 auto 20px;line-height: 2;}
 /*底部栏-导航链接*/
.footer .footerNav a{padding-right: 30px;}
.footer  a:hover{color: #008CD6;}
.footer  a:active{color: #066ea5;}
/*底部栏-微信二维码*/
.QRimg{display: inline-block;}
.QRimg img{margin-right: 30px;width: 80px;}


/*组件ui重置*/
.ant-checkbox-group-item{color:#fff;}
.login_box .ant-tabs-nav-scroll{text-align: center;} /*登录框tab居中*/

@media(max-width: 1250px){
  .header{width: 700px;}
  .footer{width: 700px;padding-top: 20px}
  .footer .footerNav a{float: left;clear:both;line-height: 2;}
}
@media(max-width: 776px){
  .header{width: 100%;}
  .footer{width:100%;padding:0 20px ;}
}

/*移动端适配*/
.mobile_menu{font-size: 22px;padding: 29px 0;}
.mobile-footer{padding: 20px;text-align: center;background-color: #21395d;color:#fff;line-height: 2}
@media(max-width: 420px){ 
  #app{padding-bottom: 0} 
  .ant-form-item-label{line-height: 40px;}
  .QRimg img{width: 80px;margin: 0 24px;}
}
</style>
